<template>
	<view class="">
		<view class="topbox">
			<u-navbar :is-back="false" title="我的" title-color="#ffffff" title-size="36" :background="background"
				:border-bottom="false">
			</u-navbar>
			<view class="myifo">
				<view class="imgbox">
					<image :src="store.userInfor.head_img" mode=""></image>
				</view>
				<view class="shouquan" v-if="!store.checkLogin">
					<button  class="denglu" plain @click="loginHeart">
						点击登录
					</button>
					<button class="jieshao" plain open-type="getPhoneNumber">
						登录后体验更多功能
					</button>
				</view>
				<view class="mynamebox" v-else>
					<view class="name" >
						 {{store.userInfor.name}}
					</view>
					<view class="time">
						注册日期：{{store.userInfor.create_time}}
					</view>
				</view>
			</view>
		</view>
		<view class="numbox">
			<view class="numsmall" v-for="(item,index) in numsmall" :key="index" @click="bothdata(item.name)">
				<view class="num">
					{{item.num }}
				</view>
				<view class="fen">
					{{item.name}}
				</view>
			</view>
		</view>

		<!-- 我的订单 -->

		<view class="orderbox">
			<view class="myorder">
				我的订单
			</view>

			<view class="navbox">
				<view class="smallnavbox" v-for="(item,index) in navarr" :key="index" @click="navbtn(item.title,index)">
					<image :src="item.image" mode="" class="navimg"></image>
					<view class="name">
						{{item.title}}
					</view>
					<view class="num" v-if="item.num">
						{{item.num}}
					</view>
				</view>
			</view>
		</view>

		<view class="btnbox">
			<view class="listbox" v-for="(item,index) in btnlist" :key="index" @click="listbtn(item.text)">
				<view class="leftbox">
					<image :src="item.img" mode=""></image>
					<text>{{item.text}}</text>
				</view>
				<view class="angle"></view>
			</view>
		</view>
	</view>

</template>

<script>
	import {
		login,getpersonalcenter
	} from "../../api/api/index.js"
	export default {
		data() {
			return {
				background: {
					background: this.$tul+'/upload/20210831/36d76c96a2ad74b6aad1c853c0c1c7d7.png no-repeat',
				},
				btnlist: [{
					img:  this.$tul+"/upload/20210831/e73711004de8966a6f9bd51a04a88c23.png",
					text: "积分订单"
				}, {
					img:  this.$tul+"/upload/20210914/241eb37e32da64daa1bcb946228397f9.png",
					text: "我的金币"
				},{
					img:  this.$tul+"/upload/20210914/b130f276d03a5c8b15feae7655d55403.png",
					text: "我的佣金"
				},{
					img:  this.$tul+"/upload/20210831/3bf2651314c3fc672585e4a9ebe25f62.png",
					text: "地址管理"
				}, {
					img:  this.$tul+"/upload/20210831/4db2a32ca2bd99153a950c14eb0c1006.png",
					text: "联系客服"
				}, {
					img:  this.$tul+"/upload/20210831/726473f75bf046598bc8ab6bf7389864.png",
					text: "关于我们"
				}, {
					img:  this.$tul+"/upload/20210831/d06c60f96c9a004af71ab6f6b7ae50a6.png",
					text: "申请经销商"
				}, {
					img:  this.$tul+"/upload/20210831/62b2d2f1576773c5ee6fce7508eff763.png",
					text: "员工端"
				}, ],
				navarr: [{
					image: this.$tul+"/upload/20210831/0fa24fdda440f8bb0db6e4ed7a548d2c.png",
					title: "全部订单",
				}, {
					image:  this.$tul+"/upload/20210831/aa0f930622fcded4770aea4fe89423a4.png",
					title: "待付款",
					num:0
				}, {
					image:  this.$tul+"/upload/20210831/dedea60b648f75f282b74688aeff09e6.png",
					title: "待收货",
					num: 0
				}, {
					image: this.$tul+"/upload/20210831/895dd245bf5bd88e3e5f5e2bdba1acbb.png",
					title: "待评价",
					num: 0
				}, {
					image: this.$tul+"/upload/20210831/3ede2383990142edd2e7843b1d5e87d3.png",
					title: "售后服务",
					num: null
				}],
				numsmall: [{
					name: "我的积分",
					num: 0
				}, {
					name: "优惠券",
					num: 0
				}, {
					name: "我的收藏",
					num: 0
				}],
			}
		},
		methods: {
			// 我的订单
			navbtn(v,i) {
				if (v == "售后服务") {
					this.jumpLink({
						link: "/pages/after_sale/index"
					})
				}else{
					// console.log(i)
					this.jumpLink({
						link: "/pages/my_order/index",query:{index:i}
					})
				}
				// if (v == "全部订单") {
					
				// }
			},
			// 列表导航
			listbtn(v) {
				if (v == "地址管理") {
					this.jumpLink({
						link: "/pages/sitegl/index"
					})
				}
				if (v == "积分订单") {
					this.jumpLink({
						link: "/pagesB/integral_order/index"
					})
				}
				if(v=="员工端"){
					uni.showModal({
						title: "提示",
						content: "是否切换身份",
						success: (res) => {
							if (res.confirm) {
								uni.showLoading({
									title: "切换中",
								});
								uni.clearStorage();
								this.$store.commit("changeCheckLogin", false);
								this.$store.commit("setUserInfor", null);
								setTimeout(() => {
									uni.hideLoading();
									uni.redirectTo({
									    url:"../../pagesA/login/index"
									});
								}, 500);
							} else if (res.cancel) {
								console.log("用户点击取消");
							}
						},
					});
				}if (v == "申请经销商") {
					this.jumpLink({
						link: "/pagesB/dealer/index"
					})
				}if(v=="关于我们"){
					this.jumpLink({
						link:"/pages/AboutUs/index"
					})
				}if(v=="我的金币"){
					this.jumpLink({
						link:"/pagesB/my_gold/index"
					})
				}if(v=="我的佣金"){
					this.jumpLink({link:"/pagesB/my_team/index"})
				}
				
			},
			bothdata(v) {
				if (v == "我的积分") {
					this.jumpLink({
						link: "/pagesB/my_integral/index"
					})
				}
				if (v == "优惠券") {
					this.jumpLink({
						link: "/pages/my_discount/index"
					})
				}
				if (v == "我的收藏") {
					this.jumpLink({
						link: "/pages/my_collect/index"
					})
				}
			},

			//登录
			loginHeart() {
				uni.showLoading({
					title: "获取中",
					mask: true,
				});
				uni.getUserProfile({
					desc: "获取你的昵称、头像、地区及性别",
					success:(e)=>{
						uni.login({
							success: (code) => {
								uni.hideLoading();
								let data = {
									name: e.userInfo.nickName,
									avatarUrl: e.userInfo.avatarUrl,
									encryptedData: e.encryptedData,
									iv: e.iv,
									code: code.code
								}
								login(data).then((res) => {
									uni.setStorageSync("token", res.data.token);
									this.$store.commit("changeCheckLogin", true);
									uni.setStorageSync("userInfor", res.data);
									uni.setStorageSync("identity",res.data.distributors_id)
									this.$store.commit("setUserInfor", res.data);
									uni.showToast({
										title: "授权登录成功",
										duration: 2000,
									});
									this.public()
								});
							}
						})
					},
					fail: () => {
						uni.hideLoading();
					},
				})
			},
			public(){
				getpersonalcenter().then(res=>{
					let a=res.data
					this.navarr[1].num=a.notice.not_pay
					this.navarr[2].num=a.notice.not_deliver_goods
					this.navarr[3].num=a.notice.evaluate
					this.navarr[4].num=a.notice.after_sale
					this.numsmall[0].num=a.basics.integral
					this.numsmall[1].num=a.basics.coupon
					this.numsmall[2].num=a.basics.collection
				})
			}
		},
		onLoad() {
			this.token=uni.getStorageSync('token')
			
		},
		onShow() {
			this.public()
		},
		computed: {
			store() {
				return this.$store.state;
			},
		}
	}
</script>

<style scoped lang="scss">
	.topbox {
		height: 388rpx;
		background: url(http://youjialibo.wm76.mtnet.ren/upload/20210831/36d76c96a2ad74b6aad1c853c0c1c7d7.png) no-repeat fixed top;
		background-size: 100% 400rpx;

		.myifo {
			display: flex;
			margin-left: 20rpx;
			// align-items: center;

			.imgbox {
				width: 106rpx;
				height: 106rpx;
				border-radius: 106rpx;
				border: 2rpx solid #FFFFFF;

				image {
					width: 106rpx;
					height: 106rpx;
					border-radius: 106rpx;
				}
			}

			.mynamebox {
				margin-left: 30rpx;

				.name {
					font-size: 30rpx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #FFFFFF;
				}

				.time {
					// width: 237rpx;
					padding: 0 20rpx;
					box-sizing: border-box;
					height: 38rpx;
					line-height: 38rpx;
					text-align: center;
					background-color: #FFC7BD;
					color: #282828;
					font-size: 18rpx;
					border-radius: 38rpx;
					margin-top: 30rpx;
				}
			}
		}
	}

	.numbox {
		width: 708rpx;
		height: 141rpx;
		border-radius: 10rpx;
		background-color: #FFD618;
		margin-left: 20rpx;
		margin-top: -70rpx;
		display: flex;
		justify-content: space-between;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		box-sizing: border-box;

		.numsmall {
			width: 33%;
			border-right: .5rpx solid rgba(0, 0, 0, .2);

			.num {
				text-align: center;
				color: #000000;
				font-size: 30rpx;
				font-family: PingFang SC
			}

			.fen {
				font-size: 18rpx;
				font-family: PingFang SC;
				font-weight: 500;
				text-align: center;
				color: #030303;
				line-height: 80rpx;
			}
		}

		.numsmall:nth-child(3) {
			border: none;
		}
	}


	.orderbox {
		width: 708rpx;
		background-color: #ffffff;
		border-radius: 10rpx;
		margin-left: 20rpx;
		padding-bottom: 20rpx;
		padding-top: 20rpx;
		box-sizing: border-box;
		margin-top: 24rpx;

		.myorder {
			color: #000000;
			font-size: 24rpx;
			margin-left: 20rpx;
			font-weight: 700;
		}

		.navbox {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			margin-top: 30rpx;
			margin-left: 20rpx;
			margin-right: 20rpx;

			.smallnavbox {
				position: relative;
				width: 82rpx;

				.navimg {
					width: 35rpx;
					height: 35rpx;
					display: block;
					margin: 0 auto;
				}

				.name {
					font-family: MicrosoftYaHei;
					font-size: 20rpx;
					color: #282828;
					text-align: center;
					margin-top: 17rpx;
				}

				.num {
					width: 24rpx;
					height: 24rpx;
					background-color: #ff3838;
					border-radius: 24rpx;
					color: #ffffff;
					font-family: PingFang-SC-Regular;
					font-size: 16rpx;
					text-align: center;
					line-height: 24rpx;
					position: absolute;
					top: -7rpx;
					right: 15rpx;
				}
			}
		}
	}

	.btnbox {
		width: 708rpx;
		background-color: #ffffff;
		border-radius: 10rpx;
		margin-left: 20rpx;
		padding-right: 20rpx;
		box-sizing: border-box;
		margin-top: 25rpx;

		.listbox {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 100rpx;
			border-bottom: 1rpx solid #dddddd;

			.leftbox {
				display: flex;
				align-items: center;
				margin-left: 20rpx;

				image {
					width: 40rpx;
					height: 40rpx;
				}

				text {
					font-family: MicrosoftYaHei;
					font-size: 22rpx;
					color: #282828;
					margin-left: 30rpx;
				}
			}

			.angle {
				width: 20rpx;
				height: 20rpx;
				border-top: 1px solid #000;
				border-left: 1px solid #000;
				transform: rotate(135deg)
			}
		}

		.listbox:nth-child(8) {
			border-bottom: none;
		}
	}


	.shouquan {
		margin-left: 16rpx;

		.denglu {
			font-family: PingFang-SC-Bold;
			font-size: 40rpx;
			height: 60rpx;
			background: none;
			line-height: 60rpx;
			border: 1rpx solid rgba($color: #000000, $alpha: 0);
			padding: 0;
			text-align: left;
			color: #ffffff;
		}

		.jieshao {
			display: inline-block;
			font-family: PingFang-SC-Regular;
			font-size: 22rpx;
			color: #d5f0dc;
			border: none;
			padding: 0;
			border-radius: 0;
			height: 20rpx;
			line-height: 20rpx;
			margin-top: 15rpx;
		}
	}
</style>
